@extends("base.base")
@include('Commodity.header')
@section("main")
    <link rel="stylesheet" href="{{asset(env('CDN_HOST')."/public/css/cart/right.css")}}">
    <main id="main-select" class="main-select">
        <div id="address-select" class="address-select">

        </div>
    </main>
    <main id="main" class="main">
        <div id="address-list" class="address-list">
            <ul class="address-ul">
                <li id="address-li" class="address-li" data-address-id="{{$address["user_address_id"]}}">
                    <table class="address-table">
                        <tbody class="address-tbody">
                        <tr class="tr1">
                            <td class="td-left">{{$address["get_name"]}}</td>
                            <td class="td-center">{{$address["phone"]}}</td>
                            <td class="td-right"></td>
                        </tr>
                        <tr class="tr2">
                            <td class="td-left">@if($address["is_default"])<span class="address-default">默认</span>@endif
                            </td>
                            <td class="td-center"><p class="address-info">{{$address["address"]}}</p></td>
                            <td class="td-right">
                                <i class="fa fa fa-angle-right address-next" aria-hidden="true"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </li>
            </ul>
        </div>
        <div id="price" class="price">
            <table class="price-table">
                <tr>
                    <td class="pb-td-1">商品合计</td>
                    <td class="pb-td-2">¥{{number_format($cartInfo["price"],2)}}</td>
                </tr>
                <tr>
                    <td class="pb-td-1">运费</td>
                    <td class="pb-td-2">¥0.00</td>
                </tr>
                <tr>
                    <td class="pb-td-1">优惠券</td>
                    <td class="pb-td-2">-¥0.00</td>
                </tr>
            </table>
        </div>
        <div class="h-2-f4f4f4"></div>
        <div id="commodity-list" class="commodity-list">
            <ul class="list-ul">
                @foreach($cart as $k => $v)
                    <li class="list-li list-box" data-cart-id="{{$v["cart_id"]}}">
                        <a href="/commodity/{{$v["commodity_id"]}}">
                            <div class="box-img">
                                <img src="{{asset($v["info_img_url"])}}" alt="">
                            </div>
                        </a>
                        <div class="box-info">
                            <div class="cnt">
                                <p class="line1">
                                            <span class="line1-name">
                                                <span>{{$v["commodity_name"]}}</span>
                                            </span>
                                    <span class="line1-num">
                                                <span>x</span>
                                                <span class="commodity-number">{{$v["number"]}}</span>
                                            </span>
                                </p>
                                <p class="line2">{{$v["commodity_color_name"]}}
                                    ; {{$v["commodity_size_name"]}}</p>
                                <div class="line3">
                                    <span class="line3-price">
                                        <span>¥{{$v["all_price"]}}</span>
                                        {{--<span class="commodity-price"--}}
                                        {{--data-unit-price="{{$v["unit_price"]}}"></span>--}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="h-2-f4f4f4"></div>
        <div id="license" class="license">
            <input class="angre" type="checkbox">我同意&emsp;<a class="license-a" href="/home/license">《一冉再商城服务协议》</a>
        </div>
    </main>
    <script>
        var user_address = {}
        $(".angre").attr('checked', true)
        $(".angre").click(function () {
            var isChecked = $(this).attr('checked');
            if (isChecked) {
                $(this).attr('checked', false)
            }
            else {
                $(this).attr('checked', true)
            }
        })
        $("#address-list").on("click", ".address-tbody", function () {
            loading.show()
            var data = {
                _token: csrf_token
            }
            $.post("/api/get_user_address", data, function (e) {
                if (e.errorCode == 0) {
                    address_select_load(e.data)
                } else {
                    alert(e.errorMsg)
                }
                loading.hide()
            })
        })

        function address_select_load(data) {
            user_address = data
            var html = '<ul class="address-ul">'
            for (key in data) {
                html += '<li class="address-li address-select-li" data-address-id="' + data[key].user_address_id + '">' +
                    '                <table class="address-table">' +
                    '                <tr class="tr1">' +
                    '                <td class="td-left">' + data[key].get_name + '</td>' +
                    '                <td class="td-center">' + data[key].phone + '</td>' +
                    '                <td class="td-right"></td>' +
                    '                </tr>' +
                    '                <tr class="tr2">' +
                    '                <td class="td-left">' + (data[key].is_default ? '<span class="address-default">默认</span>' : '') +
                    '                </td>' +
                    '            <td class="td-center"><p class="address-info">' + data[key].address + '</p></td>' +
                    '            <td class="td-right">' +
                    '                <i class="fa fa fa-angle-right address-next" aria-hidden="true"></i>' +
                    '                </td>' +
                    '                </tr>' +
                    '                </table>' +
                    '               </li>' + '<div class="h-2-f4f4f4"></div>'
            }
            html += "</ul>"
            $("#address-select").html(html)
            $("#main-select").show()
            $("#main").hide()
        }

        $("#address-select").on("click", ".address-select-li", function () {
            var th = $(this)
            var id = th.attr("data-address-id")
            address_li_load(user_address[id])
        })

        function address_li_load(data) {
            var html = '<ul class="address-ul">' +
                '                <li id="address-li" class="address-li" data-address-id="' + data.user_address_id + '">' +
                '                <table class="address-table">' +
                '                <tbody class="address-tbody">' +
                '                <tr class="tr1">' +
                '                <td class="td-left">' + data.get_name + '</td>' +
                '                <td class="td-center">' + data.phone + '</td>' +
                '                <td class="td-right"></td>' +
                '                </tr>' +
                '                <tr class="tr2">' +
                '                <td class="td-left">' + (data.is_default ? '<span class="address-default">默认</span>' : '') +
                '                </td>' +
                '            <td class="td-center"><p class="address-info">' + data.address + '</p></td>' +
                '            <td class="td-right">' +
                '                <i class="fa fa fa-angle-right address-next" aria-hidden="true"></i>' +
                '                </td>' +
                '                </tr>' +
                '                </tbody>' +
                '                </table>' +
                '               </li>' +
                '            </ul>'
            $("#address-list").html(html)
            $("#main-select").hide()
            $("#main").show()
        }
    </script>
    @include('Cart.footer_right')
@endsection
